<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Html5 Ajax 上传文件</title>
 <script type="text/javascript">
  function UpladFile() {
   var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
   var FileController = "client/excelImport.action";     // 接收上传文件的后台地址 
   // FormData 对象
   var form = new FormData();
   form.append("author", "hooyes");      // 可以增加表单数据
   form.append("file", fileObj);       // 文件对象
   // XMLHttpRequest 对象
   var xhr = new XMLHttpRequest();
   xhr.open("post", FileController, true);
   xhr.onload = function () {
    // alert("上传完成!");
   };
   xhr.upload.addEventListener("progress", progressFunction, false);
   xhr.send(form);
  }
  function progressFunction(evt) {
   var progressBar = document.getElementByIdx_x_x("progressBar");
   var percentageDiv = document.getElementByIdx_x_x("percentage");
   if (evt.lengthComputable) {
    progressBar.max = evt.total;
    progressBar.value = evt.loaded;
    percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
   }
  } 
 </script>
</head>
<body>
 <progress id="progressBar" value="0" max="100">
 </progress>
 <span id="percentage"></span>
 <br />
 <input type="file" id="file" name="myfile" />
 <input type="button" onclick="UpladFile()" value="上传" />
</body>
</html>